<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <cpn></cpn>
        <cpn>
            <!--目的是获取子组件中的languages-->
            <template slot-scope="slot">
                <!--<span v-for="item in slot.data">{{item}}-</span>-->
                <span>{{slot.data.join("-")}}</span>
            </template>
        </cpn>
        <cpn>
            <!--目的是获取子组件中的languages-->
            <template slot-scope="slot">
                <!--<span v-for="item in slot.data">{{item}}*</span>-->
                <span>{{slot.data.join("*")}}</span>
            </template>
        </cpn>
    </div>

    <template id="cpn">
        <div>
           <slot :data="languages">
               <ul>
                   <li v-for="item in languages">{{item}}</li>
               </ul>
           </slot>
        </div>
    </template>
</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            message:"你好啊！",
        },
        components:{
            cpn:{
                template:"#cpn",
                data(){
                    return {
                       languages:["JavaScript","Java","c#","Python","c++"]
                    }
                }
            }
        }
    });
</script>
</html>